<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:ry="">
	<head>
		<th:block th:include="include :: header('修改用户')" />
		<th:block th:include="include :: select2-css" />
	</head>
	<body>
	    <div class="main-content">
	        <form class="form-horizontal" id="form-user-edit">
	            <input type="hidden" id="user_id" name="user_id" th:value="${user.userId}"/>
	            <h4 class="form-header h4">基本信息</h4>
	            <div class="row">
	            	<div class="col-sm-6">
	                    <div class="form-group">
	                        <label class="col-sm-4 control-label is-required">用户名称：</label>
	                        <div class="col-sm-8">
	                            <input name="user_name" placeholder="请输入用户名称" class="form-control" type="text" maxlength="30" th:value="${user.userName}" required/>
	                        </div>
	                    </div>
	                </div>
	                <div class="col-sm-6">
	                    <div class="form-group">
	                        <label class="col-sm-4 control-label is-required">归属部门：</label>
	                        <div class="col-sm-8">
	                            <div class="input-group">
	                                <input class="form-control" type="text" name="deptName" id="treeName" onclick="selectDeptTree()"
                                           title="点击选择归属部门" placeholder="点击选择归属部门" style="cursor: pointer;"  th:value="${user.deptName}" required/>
	                            	<span class="input-group-addon"><i class="fa fa-search"></i></span>
									<input type="hidden" id="treeId" name="dept_id" th:value="${user.deptId}"/>
	                            </div>
	                        </div>
	                    </div>
	                </div>
	            </div>
	            <div class="row">
	                <div class="col-sm-6">
	                    <div class="form-group">
	                        <label class="col-sm-4 control-label is-required">手机号码：</label>
	                        <div class="col-sm-8">
                                <div class="input-group">
                                    <input id="phonenumber" name="phonenumber" placeholder="请输入手机号码" class="form-control" type="text" maxlength="11" th:value="${user.phonenumber}" required/>
                                    <span class="input-group-addon"><i class="fa fa-mobile"></i></span>
                                </div>
                            </div>
	                    </div>
	                </div>
	                <div class="col-sm-6">
	                    <div class="form-group">
	                        <label class="col-sm-4 control-label">邮箱：</label>
	                        <div class="col-sm-8">
                                <div class="input-group">
                                    <input id="email" name="email" class="form-control email" type="text" maxlength="50" placeholder="请输入邮箱" th:value="${user.email}"/>
                                    <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
                                </div>
                            </div>
	                    </div>
	                </div>
	            </div>
	            <div class="row">
	                <div class="col-sm-6">
	                    <div class="form-group">
	                        <label class="col-sm-4 control-label is-required">登录账号：</label>
	                        <div class="col-sm-8">
	                            <input id="login_name" name="login_name" class="form-control" type="text" readonly="true" th:value="${user.loginName}"/>
	                        </div>
	                    </div>
	                </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label class="col-sm-4 control-label">用户性别：</label>
                            <div class="col-sm-8">
                                <ry:selectDict dictType="sys_user_sex" name="sex" class="form-control m-b" th:value="${user.sex}"/>
                            </div>
                        </div>
                    </div>
	            </div>
	            <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label class="col-sm-4 control-label">用户状态：</label>
                            <div class="col-sm-8">
                                <ry:switch id="status" switchValue="0" th:value="${user.status}"/>
                            </div>
                        </div>
                    </div>
	                <div class="col-sm-6">
	                    <div class="form-group">
	                        <label class="col-sm-4 control-label">岗位：</label>
	                        <div class="col-sm-8">
                                <ry:select id="post" class="form-control select2-multiple" th:list="${postList}" itemLabel="post_name" itemValue="post_id"
                                           th:value="${user.postIds}" multiple/>
	                        </div>
	                    </div>
	                </div>
	            </div>
	            <div class="row">
	            	<div class="col-sm-12">
	                    <div class="form-group">
	                        <label class="col-xs-2 control-label is-required">角色：</label>
	                        <div class="col-xs-10">
                                <ry:checkboxList name="role" class="check-box" th:list="${roleList}" itemLabel="roleName" itemValue="roleId"
                                                 required="true" th:value="${user.roleIds}"/>
	                        </div>
	                    </div>
	                </div>
	            </div>
	            <h4 class="form-header h4">其他信息</h4>
	            <div class="row">
	                <div class="col-sm-12">
	                    <div class="form-group">
	                        <label class="col-xs-2 control-label">备注：</label>
	                        <div class="col-xs-10">
	                            <textarea name="remark" maxlength="500" class="form-control" rows="3">[[${user.remark}]]</textarea>
	                        </div>
	                    </div>
	                </div>
	            </div>
	        </form>
	    </div>
		<th:block th:include="include :: footer" />
		<th:block th:include="include :: select2-js" />
		<script type="text/javascript">
	        var prefix = ctx + "system/user";

	        $("#form-user-edit").validate({
	        	onkeyup: false,
	        	rules:{
	        		email:{
	                    email:true,
	                    remote: {
	                        url: prefix + "/checkEmailUnique",
	                        type: "post",
	                        dataType: "json",
	                        data: {
	                        	"user_id": function() {
	                                return $("#user_id").val();
	                            },
	                			"email": function() {
	                                return $.common.trim($("#email").val());
	                            }
	                        },
	                        dataFilter: function (data, type) {
	                        	return $.validate.unique(data);
	                        }
	                    }
	        		},
	        		phonenumber:{
	        			isPhone:true,
	                    remote: {
	                        url: prefix + "/checkPhoneUnique",
	                        type: "post",
	                        dataType: "json",
	                        data: {
	                        	"user_id": function() {
	                        		return $("#user_id").val();
	                            },
	                			"phonenumber": function() {
	                                return $.common.trim($("#phonenumber").val());
	                            }
	                        },
	                        dataFilter: function (data, type) {
	                        	return $.validate.unique(data);
	                        }
	                    }
	        		},
	        	},
	        	messages: {
	        		"email": {
	                    remote: "Email已经存在"
	                },
	        		"phonenumber":{
	                	remote: "手机号码已经存在"
	        		}
	            },
	            focusCleanup: true
	        });

	        function submitHandler() {
		        if ($.validate.form()) {
		        	var data = $("#form-user-edit").serializeArray();
		        	var status = $("input[id='status']").is(':checked') == true ? 0 : 1;
		        	var roleIds = $.form.selectCheckeds("role");
		        	var postIds = $.form.selectSelects("post");
		        	data.push({"name": "status", "value": status});
		        	data.push({"name": "roleIds", "value": roleIds});
		        	data.push({"name": "postIds", "value": postIds});
		        	$.operate.save(prefix + "/edit", data);
		        }
		    }

            /* 用户管理-修改-选择部门树 */
	        function selectDeptTree() {
	        	var deptId = $.common.isEmpty($("#treeId").val()) ? "100" : $("#treeId").val();
	            var url = ctx + "system/dept/selectDeptTree/" + deptId;
			    var options = {
					title: '选择部门',
					width: "380",
					url: url,
					callBack: doSubmit
				};
				$.modal.openOptions(options);
			}

            function doSubmit(index, layero){
                var tree = layero.find("iframe")[0].contentWindow.$._tree;
                var body = layer.getChildFrame('body', index);
                $("#treeId").val(body.find('#treeId').val());
                $("#treeName").val(body.find('#treeName').val());
                layer.close(index);
            }

			$(function() {
	            $('#post').select2({
	                placeholder:"请选择岗位",
	                allowClear: true
	            });
	        })
	    </script>
	</body>
</html>